<template>
	<view class="home flex-col">
		<my-status-bar />
		<u-swiper :list="swiperList" height="160" radius="0" indicator circular></u-swiper>
		<view class="p-10">
			<uni-notice-bar class="b-r-8" background-color="rgba(255,255,255)" :speed="30" show-icon single scrollable :text="text" />

			<template v-for="(item, index) in appCategoryList" :index="index">
				<applicationItem v-bind="item" :appList="item.appList" class="m-b-0" />
			</template>

			<view class="p-y-10 p-x-20 b-r-10 m-y-10 flex m-between s-center" style="background: #fff">
				<view class="flex s-center f-s-18 fw">矿区安全生产</view>
				<view class="flex s-center">
					<up-count-to bold class="m-r-5" :endVal="tianshu" color="#0052D9" />
					天
				</view>
			</view>
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">安全概况</text></view>
					</template>
					<view class="flex m-between s-center">
						<u-tabs
							lineWidth="30"
							lineColor="#2172FC"
							:list="[{ name: '日' }, { name: '月' }, { name: '年' }]"
							:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }"
							@click="fn1"
							itemStyle="width:40px;height:44px"
						/>
					</view>
					<my-grid :list="list1" :col="3" imgWidth="30%" class="m-t-10" @click="click"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产概况</text></view>
					</template>
					<my-grid :list="list2" :decimals="2" :col="2" imgWidth="25%"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">销售概况</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日值班领导</text></view>
					</template>
					<my-scroll style="height: 540rpx">
						<view
							v-for="(item, i) in list3"
							:key="i"
							:class="{ 'm-t-10': i > 0 }"
							class="flex s-center m-between p-10 b-r-10"
							style="background-color: #f5f7fe; border: 1px solid #dce3e8"
						>
							<view style="background-color: #0d79be" class="b-r-10 p-t-5 p-x-5">
								<image :src="getImgUrl(`tx.png`)" mode="widthFix" style="width: 100rpx" class="block" />
							</view>
							<view class="f1 w0 m-l-10">
								<view class="m-b-10">
									<text style="color: #0052d9" class="f-s-20 fw">{{ item.name }}</text>
								</view>
								<view>
									<text style="color: #555d6f" class="m-r-10">{{ item.duty }}</text>
									<text style="color: #555d6f">{{ phoneHide(item.phone) }}</text>
								</view>
							</view>
							<image :src="getImgUrl(`phone.png`)" mode="widthFix" style="width: 80rpx" @click="makePhone(item)"></image>
						</view>
					</my-scroll>
				</u-collapse-item>
			</u-collapse>
		</view>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
import applicationItem from '../application/application-item.vue';
import { AndroidCheckUpdate } from '@/utils/update.js';
import { Authorized } from '@u/msgAuth';
import { getByApiCode, getApiFabric, appAnnouncement, callApiBySuffix } from '@/api/customApi';
import { phoneHide } from '@u/index';

/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************基础数据*************************************************/
const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3, 4]),
	swiperList = ref(['/static/img/index/banner1.png', '/static/img/index/banner2.png', '/static/img/index/banner3.png']),
	appCategoryList = [
		{
			// title: '快捷入口',
			appList: [
				{
					name: 'HSE',
					path: '/pages/appPages/appPages',
					icon: 'index/hse.svg',
					address: 'https://117.191.103.69:38087/xjsthhse/web/BCBS04',
					has: ['中层以上']
				},
				{
					name: '设备生命周期',
					path: '/pages/appPages/appPages',
					icon: 'index/sbsmzq.svg',
					address: 'https://117.191.103.69:39400',
					has: ['普通用户']
					// 	address: 'http://172.41.100.237:5174/'
				},
				{
					name: '矿山设计',
					path: '/pages/appPages/appPages',
					icon: 'index/kssj.svg',
					address: 'https://218.31.110.43:42099/mes-h5/#/views/home/index',
					has: ['']
				},
				{
					name: '人员定位',
					path: '/pages/appPages/appPages',
					icon: 'index/rydw.svg',
					address: '',
					has: ['']
					// http://218.31.110.43:38803/rydwapp/
				}
				// {
				// 	name: '能耗精细化',
				// 	path: '/pages/application/znfz/nhjxh/index',
				// 	icon: 'index/nhjxh.svg'
				// },
				// {
				// 	name: '安全一张图',
				// 	path: '/pages/application/xxjc/aqyzt/index',
				// 	icon: 'work/aqyzt.png'
				// },
				// {
				// 	name: '产运销一张图',
				// 	path: '/pages/application/xxjc/cyx/index',
				// 	icon: 'work/scdd.png'
				// }
			]
		}
	];

/***********************************************app公告*****************************/
const text = ref('');

function appAnnouncementFn() {
	appAnnouncement().then((res) => {
		text.value = res.data.data[1][0];
	});
}
/**********************************************************************生产天数/天气***********************************/
let tianshu = ref(0);
function fn0() {
	getByApiCode({
		apiCode: 'anQuanShengChanTianShu',
		propertyMapping: {
			tianshu: 'tianshu'
		}
	}).then((res) => {
		tianshu.value = res.data[0].tianshu || 0;
	});
}

/****************************************安全概况****************************/
let list1 = ref([
	{
		img: 'index/wcl.png',
		key: '未处理',
		title: '未处理',
		value: '0',
		unit: '条'
	},
	{
		img: 'index/zs.png',
		key: '处理中',
		title: '处理中',
		value: '0',
		unit: '条'
	},
	{
		img: 'index/ycl.png',
		key: '已处理',
		title: '已处理',
		value: '0',
		unit: '条'
	}
]);
const apiCode = ['jinrigaojingtongji', 'yuegaojingrongji', 'niangaojingtongji'];
function fn1({ index = 0, name = '日' } = {}) {
	getByApiCode({
		apiCode: apiCode[index],
		propertyMapping: {
			key: 'name',
			val: 'val'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list1.value.forEach((item) => {
			item.value = data[item.key];
		});
	});
}
const click = (name) => {
	if (name.title == '未处理') {
		uni.$store.user.current = 0;
	} else if (name.title == '处理中') {
		uni.$store.user.current = 1;
	} else {
		uni.$store.user.current = 2;
	}
	uni.switchTab({
		url: '/pages/message/index'
	});
};

/**************************************生产概况*************************************************/
let list2 = ref([
	{
		key: 'YProductionPlanVal',
		title: '本年度计划生产原煤',
		value: 0,
		unit: '万吨',
		img: 'index/bnjhsc.png'
	},
	{
		key: 'YProductionVal',
		title: '本年度累计生产原煤',
		value: 0,
		unit: '万吨',
		img: 'index/bnljsc.png'
	},
	{
		key: 'MProductionVal',
		title: '本月累计生产原煤',
		value: 0,
		unit: '万吨',
		img: 'index/byljsc.png'
	},
	{
		key: 'DProductionVal',
		title: '昨日生产原煤',
		value: 0,
		unit: '万吨',
		img: 'index/zrsc.png'
	}
]);

function fn2() {
	getApiFabric({
		apiCode: '9e852b3e-32e4-499c-91fb-c8ac3d3719c4',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list2.value.forEach((item) => {
			item.value = data[item.key] || 0;
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [20, 0, 0, 0],
		enableScroll: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		xAxis: {
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '产量/万吨',
					titleOffsetY: -10,
					titleOffsetX: 10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	};

function fn3() {
	getApiFabric({
		apiCode: '57d5b9c9-b6d8-4c59-acde-564e22a8bfbc',
		propertyMapping: {
			x: 'month',
			y1: 'actual',
			y2: 'plan'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData.value = {
			categories: resData.categories,
			series: [
				{
					name: '实际',
					data: resData.series1
				},
				{
					name: '计划',
					data: resData.series2
				}
			]
		};
		nextTick(() => {
			collapse.value.init();
		});
	});
}

/**************************************销售概况*************************************************/
const chartData1 = ref({}),
	opts1 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		enableScroll: true,
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		xAxis: {
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万元',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	};

function fn4() {
	getApiFabric({
		apiCode: '0f44cd98-8004-49b7-8375-62b73e5fe6df',
		propertyMapping: {
			x: 'month',
			y1: 'predictVal',
			z1: 'actualVal'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.z1);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData1.value = {
			categories: resData.categories,
			series: [
				{
					name: '预测',
					data: resData.series1
				},
				{
					name: '实际',
					data: resData.series2
				}
			]
		};
	});
}

/****************************************当日值班信息****************************/
let list3 = ref([{}, {}, {}]);
function fn5() {
	getByApiCode({
		apiCode: 'dangrizhibanxinxi',
		propertyMapping: {
			duty: 'typename',
			name: 'name',
			phone: 'phone'
		}
	}).then((res) => {
		list3.value = res.data;
	});
}
function makePhone(item) {
	// #ifdef APP-PLUS
	plus.device.dial(item.phone, true);
	//#endif

	// #ifdef H5
	uni.makePhoneCall({
		phoneNumber: item.phone
	});
	//#endif
}

function getServerData(refresh) {
	Promise.all([appAnnouncementFn(), fn0(), fn1(), fn2(), fn3(), fn4(), fn5()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		setTimeout(() => {
			collapse.value.init();
		}, 400);
	});
}

function pushMsg() {
	uni.navigateTo({
		url: '/pages/index/msg'
	});
}

onShow(() => {
	getServerData();
	// #ifdef APP
	AndroidCheckUpdate();
	// plus.runtime.setBadgeNumber(8);
	// #endif
});

onLoad(() => {
	// #ifdef APP
	// Authorized();
	// #endif
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

// .title {
// 	font-size: 28rpx;
// 	color: #8f8f94;
// }

.leader-list {
	margin-top: -20rpx;

	.leader-list-item {
		background: #f5f7fe;
		margin-top: 12rpx;
		height: 125rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			flex: 1;

			.post {
				color: #555d6f;
			}

			.name {
				color: #0052d9;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.right {
			margin-right: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.line-progress {
	text-align: left;
	line-height: 60rpx;
	font-size: 15px;
	padding: 5rpx;
}

.list_left {
	text-align: left;
	margin: 5rpx;
	font-size: 14px;
}

.list_conten {
	color: #2472f1;
	margin: 0rpx 5rpx;
}

.list_right {
	float: right;
}

.grid {
	.unit {
		font-size: 24rpx;
		color: #828893;
		margin-left: 8rpx;
		float: right;
	}
}

.u-border-bottom {
	border-bottom-width: 10rpx !important;
	border-color: #fff !important;
	border-bottom-style: solid;
}

.u-border-right {
	border-right-width: 10rpx !important;
	border-color: #fff !important;
	border-right-style: solid;
}

.grid_box {
	height: 100rpx;
	line-height: 100rpx;
}

.grid_left {
	float: left;
	margin-right: 50rpx;
	display: flex;
}

.grid_conten {
	color: #2472f1;
	float: right;
}

.charts_box {
	height: 500rpx;
}
</style>
